<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>火箭返回顶部</title>
</head>

<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 100%;
            height: 3000px;
            background-image: linear-gradient(skyblue, pink);
        }
        
        .rocket {
            width: 148px;
            height: 250px;
            background-image: url("./1.png");
            /* 返回顶部的火箭应该固定在页面底部 */
            position: fixed;
            bottom: 0;
            right: 0;
        }
        
        .active {
            animation: fire 0.3s infinite steps(4);
        }
        /* hover显示第二张图片 */
        
        .rocket:hover {
            background-position: -148px 0;
            cursor: pointer;
        }
        /* 动画效果 */
        
        @keyframes fire {
            0% {
                background-position: -296px 0;
            }
            100% {
                background-position: -892px 0;
            }
        }
    </style>
    <div class="box">
        <div class="rocket"></div>
    </div>
    <script>
        /* 
                火箭飞出浏览器的路程=火箭盒子的offsetTop+火箭盒子的height
                滚动条的路程 scrollTop
                路程已知 时间已知 求速度
                速度？->单位时间内移动的距离->step->定期器->16->方便计算我们取20
                1s走完
                20ms移动一次 1s要走完 总时间 1000ms
                火箭的速度*20*50= 火箭飞出浏览器的路程
                火箭的速度*20=火箭飞出浏览器的路程/50
                */
        let rocket = document.querySelector(".rocket");
        let rocket_distance; //火箭的路程
        let rocket_v; //火箭的速度
        let bars_distance; //滚动条的距离
        let bars_v; //滚动条速度
        //点击后添加喷火样式
        rocket.addEventListener("click", function() {
            rocket.classList.add("active");
            //火箭的路程
            rocket_distance = rocket.offsetTop + 250;
            // 滚动条的距离
            bars_distance = document.documentElement.scrollTop;
            //火箭的速度
            rocket_v = rocket_distance / 50;
            // 滚动条速度
            bars_v = bars_distance / 50;
            let timer = setInterval(function() {
                //滚动条滚动
                document.documentElement.scrollTop -= bars_v;
                //火箭移动
                rocket.style.top = rocket.offsetTop - rocket_v + "px";
                //如果火箭到达顶部，让火箭消失，不再喷火
                if (document.documentElement.scrollTop == 0) {
                    clearInterval(timer);
                    rocket.style.top = "";
                    rocket.classList.remove("active");
                    rocket.style.display = "none";
                }
            }, 20);
        });
        //滚动一定距离后 返回顶部火箭再次出现
        document.addEventListener("scroll", function() {
            console.log(document.documentElement.scrollTop);
            if (document.documentElement.scrollTop > 1000) {
                rocket.style.display = "block";
            }
        });
    </script>
</body>

</html>